<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #btn
    {
        margin: 0 auto;
        text-align: center;
    }
    *
    {
        margin: 0;
        padding: 0;
    }
    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left:200px;
    }
    #box2
    {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        left:0;
        top: 200px;
    }
    #box3
    {
        width: 1px;
        height: 1000px;
        border-left: 1px black solid;
        position: absolute;
        left:800px
    }
    </style>

    <script type="text/javascript" src="../js/元素方块的简单操作.js"></script>
    <script type="text/javascript">
    window.onload=function()
    {
        //获取box1
        var box1=document.getElementById("box1");
        //获取box2
        var box2=document.getElementById("box2");
        //获取box3
        var box3=document.getElementById("box3");

        //获取btn01
        var btn01=document.getElementById("btn01");
        //获取btn02
        var btn02=document.getElementById("btn02");
        //获取btn03
        var btn03=document.getElementById("btn03");
        //获取btn04
        var btn04=document.getElementById("btn04");
        //获取btn05
        var btn05=document.getElementById("btn05");
        //获取btn06
        var btn06=document.getElementById("btn06");
        //获取btn07
        var btn07=document.getElementById("btn07");
        //获取btn08
        var btn08=document.getElementById("btn08");

        //点击btn01后，红色向右移动
        btn01.onclick=function()
        {
            move(box1,"left",800,20,function()
            {
                //当然可以进行套娃函数
                move(box1,"left",400,20,function(){});
            });
        };

        //点击btn02后，红色向左移动
        btn02.onclick=function()
        {
            move(box1,"left",0,20);
        };

        //点击btn03后，黄色向右移动
        btn03.onclick=function()
        {
            move(box2,"left",800,20);
        };

        //点击btn04后，黄色向左移动
        btn04.onclick=function()
        {
            move(box2,"left",0,20);
        };

        //点击btn05后，黄色向下移动
        btn05.onclick=function()
        {
            move(box2,"top",800,20);
        };

        //点击btn06后，黄色向上移动
        btn06.onclick=function()
        {
            move(box2,"top",0,20);
        };

        //点击btn07后，红色向下移动
        btn07.onclick=function()
        {
            move(box1,"top",800,20);
        };

        //点击btn08后，红色向上移动
        btn08.onclick=function()
        {
            move(box1,"top",0,20);
        };
        //点击测试按钮，
        //但因为调用了提前清定时器，所以在开启下一个定时器的时候，上一个定时器也会直接清除
        //需要对timer变量的调用进行一些修改
    };
        
        //下面这个方法需要考虑是否兼容IE8，为了方便，我直接使用getComputedStyle(obj,null)[name]
        /*
        function getStyle(obj,name)
        {
            if(window.getComputedStyle)
            {
                return getComputedStyle(obj,null)[name];
            }
            else
            {
                return obj.currentStyle[name];
            }
        }
        */
    </script>
</head>
<body>
    <div id="btn">
    <button id="btn01">红色右移</button>
    <button id="btn02">红色左移</button>
    <button id="btn07">红色下移</button>
    <button id="btn08">红色上移</button>
    <button id="btn03">黄色右移</button>
    <button id="btn04">黄色左移</button>
    <button id="btn05">黄色下移</button>
    <button id="btn06">黄色上移</button>
    </div>
    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>